import { useState, memo } from 'react'
import styles from './PickerCalendar.module.scss'
import PopupDateRange from '../PopupDateRange';
import { DatetimePicker } from 'react-vant';
import { parseTime } from '@/utils';
// import { useIsMobile } from '../../hooks/useIsMobile'

export type PickerItemType = number | string


export type GetCalendarValueParams = Pick<PickerCalendarProps, 'dateType' | 'dateRange'> & { dateRangeActualStr?: string }
export interface ItemChange {
    (params: GetCalendarValueParams): void
}
export interface PickerCalendarProps {
    dateType: PickerItemType,
    dateRange?: string | null | string[]
    getCalendarValue?: ItemChange
}

// 今天、昨天、近7天
const QuickDate: React.FC<any> = memo((props) => {
    const { type, name, onClick, className } = props

    const handleTodayActive = (type: PickerItemType, date: PickerCalendarProps['dateRange']) => {
        onClick({ dateType: type, dateRange: date })
    }

    return (<div className={className} onClick={() => handleTodayActive(type, '')}>{name} {
        type === 1 && <span style={{ fontSize: "10px",lineHeight:"10px" }}>(实时)</span>
    }</div>)
})

// 月份
const MonthDate: React.FC<any> = memo((props) => {
    const { type, name, onClick, className } = props
    const [value, setValue] = useState(new Date())

    const handleMonthActive = (value: any) => {
        onClick({ dateType: type, dateRange: parseTime(value, '{y}-{m}') })
        setValue(value)
    }


    return (
        <DatetimePicker
            popup={{ round: true }}
            type='year-month'
            title='选择年月'
            minDate={new Date(2023, 0, 1)}
            maxDate={new Date()}
            value={value}
            formatter={(type: string, val: string) => {
                if (type === 'year') {
                    return `${val}年`
                }
                if (type === 'month') {
                    return `${val}月`
                }
                return val
            }}
            onConfirm={handleMonthActive}
        >
            {(_val: any, _: any, actions: { open: () => void; }) => {
                return (
                    <div className={className} onClick={() => actions.open()}>{name}</div>
                )
            }}
        </DatetimePicker>
    )
})

// 自定义日期范围
const CustomRangeDate: React.FC<any> = memo((props) => {
    const { type, name, onClick, className } = props

    const handleCustomRangeActive = (value: Date | Date[]) => {
        if (value && (value as Date[]).length) {
            onClick({ dateType: type, dateRange: [parseTime((value as Date[])[0], '{y}-{m}-{d}'), parseTime((value as Date[])[1], '{y}-{m}-{d}')] })
        }
    }

    return (
        <PopupDateRange onConfirm={handleCustomRangeActive}>
            <div className={className}>{name}</div>
        </PopupDateRange>
    )
})


const PickerCalendar: React.FC<PickerCalendarProps> = (props) => {
    // const isMobile = useIsMobile()
    const [dateTypeGrounp] = useState([
        { type: 1, name: "今日", component: QuickDate },
        { type: 2, name: "昨日", component: QuickDate },
        { type: 3, name: "近7日", component: QuickDate },
        { type: 4, name: "月份", component: MonthDate },
        { type: 5, name: "自定义", component: CustomRangeDate },
    ])

    const pickerItemChange = (params: GetCalendarValueParams) => {
        if (params.dateType === 1) {
            params.dateRangeActualStr = parseTime(new Date().getTime(), '{y}-{m}-{d} {h}:{i}')
        } else if (params.dateType === 2) {
            params.dateRangeActualStr = parseTime(new Date().getTime() - 24 * 60 * 60 * 1000, '{y}-{m}-{d}')
        } else if (params.dateType === 3) {
            params.dateRangeActualStr = '近7日'
        } else if (params.dateType === 4) {
            params.dateRangeActualStr = params.dateRange as string
        } else if (params.dateType === 5) {
            params.dateRangeActualStr = (params.dateRange as string[])[0] + ' - ' + (params.dateRange as string[])[1]
        } else {
            params.dateRangeActualStr = ""
        }
        (props.getCalendarValue as ItemChange)(params)
    }


    return (
        <div className={styles['picker-calendar-wrap']}>
            {dateTypeGrounp.map((item) => {
                const ComponentName = item["component"]

                return (<ComponentName
                    type={item.type}
                    name={item.name}
                    key={item.type}
                    className={`${styles['picker-item-wrap']} ${item.type === props.dateType ? styles['picker-item-active'] : ''}`}
                    onClick={(params: Pick<PickerCalendarProps, 'dateType' | 'dateRange'>) => pickerItemChange(params)}
                ></ComponentName>)
            })}
        </div>
    )
}

export default PickerCalendar